<template>
  <div class="app-container">
    <div class="mb-20">
      <el-button class="btn-active" icon="el-icon-plus" size="mini"
        >导入模板</el-button
      >
      <!-- <el-button class="btn-active" icon="el-icon-plus" size="mini">下载模板</el-button> -->
      <el-button
        class="btn-delete"
        icon="el-icon-delete"
        size="mini"
        @click="deleteRow"
        >删除</el-button
      >
    </div>
    <div class="search">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="">
          <el-select v-model="form.invokeStatus" placeholder="调用状态">
            <el-option label="末执行" value="0" />
            <el-option label="已执行" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            v-model="form.createTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="创建时间"
          />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.createUserName" placeholder="创建人员" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.tmplName" placeholder="模板名称" />
        </el-form-item>
        <el-form-item label="">
          <el-button size="mini" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="场景名称" width="130">
        <template slot-scope="scope">
          {{ scope.row.sceneName }}
        </template>
      </el-table-column>
      <el-table-column label="模板名称" width="130" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.tmplName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模板信息描述" align="center">
        <template slot-scope="scope">
          {{ scope.row.tmplDesc }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="调用状态"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.invokeStatus == 0" class="green-tag"
            >未执行</span
          >
          <span v-if="scope.row.invokeStatus == 1" class="other-tag"
            >已执行</span
          >
          <span v-if="scope.row.invokeStatus == 2" class="other-tag"
            >执行中</span
          >
          <span v-if="scope.row.invokeStatus == 3" class="red-tag"
            >执行异常</span
          >
          <!-- <el-tag :type="scope.row.invokeStatus | statusFilter">{{ scope.row.invokeStatus == 0 ?'已调用': '未调用' }}</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="创建人" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.createBy }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="创建时间"
        width="200"
      >
        <template slot-scope="scope">
          <!-- <i class="el-icon-time" /> -->
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="修改时间"
        width="200"
      >
        <template slot-scope="scope">
          <!-- <i class="el-icon-time" /> -->
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            class="detail"
            icon="el-icon-download"
            @click="download(scope.row)"
            >下载</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-button class="detail" icon="el-icon-edit-outline">调用模板</el-button> -->
      <!-- <el-button class="detail" icon="el-icon-edit-outline">编辑</el-button> -->
      <!-- <el-button class="detail" icon="el-icon-refresh-right">详情</el-button> -->
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getTmplList } from "@/api/table";
import { removeTmpl, downLoadTmplFile } from "@/api/form";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      form: {},
      list: null,
      currentPage: 1,
      pageNum: 10,
      total: 0,
      listLoading: true,
      multipleSelection: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    download(row) {
      window.location.href =
        location.origin +
        "/tmpl/manager/downLoadTmplFile?templId=" +
        row.tmplId;
      // downLoadTmplFile({ templId: row.tmplId }).then((res) => {
      //   console.log(res);
      // });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    deleteRow() {
      removeTmpl({
        ids: this.multipleSelection.map((item) => item.tmplId).join(","),
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.fetchData();
        }
      });
    },
    handleSizeChange(val) {
      this.pageNum = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      getTmplList({
        pageSize: this.pageNum,
        pageNum: this.currentPage,
        ...this.form,
      }).then((res) => {
        this.list = res.rows;
        this.listLoading = false;
        this.total = res.total;
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep {
  .detail.el-button {
    padding: 9px 4px;
  }
}
</style>
